<template>
  <div>
    <h1>子应用-2-首页</h1>
    <h2>小尺寸图片：base64解决</h2>
    <img src="@/assets/small.jpg" alt="" />
    <h2>大尺寸图片：配置代理解决</h2>
    <img src="@/assets/big.png" alt="" />
    <h1>{{ route.path }}</h1>
    <div>
      <button @click="handleClick">跳转到about</button>
      <button @click="handleSendData">修改全局数据 { name: 'jack' }</button>
      <button @click="handleGoMain('/about')">跳转到主应用 about 页</button>
      <button @click="handleGoSubApp1">跳转到子应用1</button>
    </div>
  </div>
</template>

<script setup>
import { inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const parentRouter = inject("parentRouter");
const setGlobalState = inject("setGlobalState");
const handleClick = () => {
  router.push("/about");
};
const handleSendData = () => {
  if (window.__POWERED_BY_QIANKUN__) {
    setGlobalState({
      name: "jack",
    });
  } else {
    alert("请在qiankun环境下使用");
  }
};

const handleGoMain = (path) => {
  if (window.__POWERED_BY_QIANKUN__) {
    parentRouter.push(path);
  } else {
    alert("请在qiankun环境下使用");
  }
};

const handleGoSubApp1 = () => {
  if (window.__POWERED_BY_QIANKUN__) {
    parentRouter.push("/sub-app-1/");
  } else {
    alert("请在qiankun环境下使用");
  }
};
</script>

<style scoped>
img {
  width: 500px;
  height: 350px;
}
</style>
